<template>
  <el-dialog title="设置角色" :visible.sync="detailsvisible" :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" size="mini" label-position="right">
      <el-form-item label="设置角色名称" prop="projectRoleName">
        <el-input class="input-item" v-model="ruleForm.projectRoleName" placeholder="请输入"></el-input>
      </el-form-item>
    </el-form>
    <div class="login-btn flex-center">
      <el-button class="Register" @click="handleClose()">取消</el-button>
      <el-button type="primary" @click="submitForm()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'setRole',
  data () {
    return {
      time: '',
      detailsvisible: false,
      ruleForm: {
        projectRoleName: ''
      },
      rules: {
        projectRoleName: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    };
  },
  mounted () {
  },
  methods: {
    info () {
      this.detailsvisible = true
      this.ruleForm.projectRoleName = ''
    },
    // 保存
    submitForm () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$emit('getRole', this.ruleForm)
          this.handleClose()
        }
      })
    },
    // 关闭弹框
    handleClose () {
      this.detailsvisible = false
    }
  }
}
</script>
<style scoped>
.login-btn{margin-top: 20px;}
/deep/.el-dialog{width: 30% !important;margin-top: 30vh !important;}
</style>
